<template>
	<view>
		<view class="top-banner">
			感谢您宣传缘诉，不仅为自己的缘分路上结下了一份善缘，而且管理大大也会根据宣传效果赠送您相应的缘分值噢。
		</view>
		<view class="content">
			<view class="uni-textarea">
				<textarea v-model="link" placeholder="请输入您在其他平台宣传的链接" />
			</view>
			<imgUpload class="upload" :max="1" :action="`${uploadUrl}${state}/`" v-model="imgList"
				@uploadSuccess="uploadSuccess" @uploadFail="uploadFail" @imgDelete="imgDelete"
				:headers="{'Authorization':token}">

			</imgUpload>
			<view class="btn" @click="submit">
				确认提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		url,
		request,
		login
	} from '@/service/api.js'
	import imgUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	export default {
		data() {
			return {
				link: '',
				image: '',
				explains: '',
				uploadUrl: url.upload,
				state: 0,
				imgList: [],
				token: `Bearer ${uni.getStorageSync('auth')}`,
			};
		},
		components: {
			imgUpload
		},
		methods: {
			uploadSuccess(res) {
				if (res.statusCode === 200) {
					const result = JSON.parse(res.data)
					this.imgList.push(result.data)
					console.log(result)
				}
			},
			uploadFail(e) {
				uni.showToast({
					title: '错误',
					text: '上传图片失败'
				})
			},
			imgDelete(e) {
				this.imgList = [];
			},
			submit() {
				if (!this.link) {
					uni.showToast({
						title: '请输入内容后提交',
						icon: "error"
					})
					return
				}
				request(url.postAdvertice, 'get', {
					link: this.link,
					image: this.imgList[0],
					explains: this.explains
				}).then(res => {
					if (res.status === 200) {
						uni.showToast({
							title: '提交成功',
							icon: "none"
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="less">
	* {
		box-sizing: border-box;
	}

	.content {
		overflow: hidden;
		margin-top: 10px;
		height: 80vh;
		background: #fff;

		.uni-textarea {
			padding: 25px 15px;

			textarea {
				width: 100%;
				border: 1px solid #dcdcdc;
				border-radius: 3px;
			}
		}
	}

	.top-banner {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		background: linear-gradient(-41deg, rgba(49, 104, 174, 0.57), rgba(145, 83, 188, 0.57));
		font-size: 13px;
		font-family: SimHei;
		color: #FFFFFF;
		line-height: 19px;
		padding: 15px;
	}

	.btn {
		margin: auto;
		margin-top: 40px;
		width: 90%;
		height: 35px;
		background: #FC9380;
		border-radius: 5px;
		font-size: 17px;
		color: #FFFFFF;
		line-height: 23px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
